{/* Copyright 2020 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License. */}

# Breadcrumbs Accessibility Specification

## Overview

In a hierarchical navigation, [`Breadcrumbs`](https://react-spectrum.corp.adobe.com/components/Breadcrumbs) show the user the pages that exist directly between the current page and the root (or topmost) level of the navigational structure.
This aids users in orienting themselves within a product, especially ones with exceptionally complex or deep navigational trees.
As space becomes limited, or as a user navigates deeper within a hierarchical structure, nested breadcrumbs provide a solution by displaying as many bottom level navigation items as possible while also providing an icon-only dropdown menu that opens to show all navigation items in the breadcrumb hierarchy.
In some cases, only the current page may be displayed, and in rare cases the icon-only dropdown menu alone may be displayed.
In certain cases, root context needs to be displayed, which is also an option when breadcrumb items are nested within an icon-only dropdown menu.
Breadcrumbs can also allow for a drag-and-drop interaction when they are used in a file management context.

Breadcrumbs in Spectrum have a multi-line (`title` in v2) variant, where the last item renders as a `Header`.

## WAI-ARIA Design Pattern

The [`Breadcrumbs`](https://react-spectrum.corp.adobe.com/components/Breadcrumbs) component implements the [Breadcrumb design pattern, per WAI-ARIA 1.1](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).

### Keyboard

Breadcrumbs are presented as a list of links. Each Breadcrumb link should be included in the tab keyboard navigation for the page.

Similarly, when Breadcrumbs are nested within an icon-only dropdown menu, the menu button should be included in the tab keyboard navigation for the page.

### Roles, States, and Properties

- Breadcrumb trail is contained within a navigation landmark region.
- The landmark region is labelled via [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label) or [`aria-labelledby`](https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby). By default, the localized string 'Breadcrumbs' is used to label the navigation landmark region.
- The link to the current page has [`aria-current`](https://www.w3.org/TR/wai-aria-1.1/#aria-current) set to `page` or, if the Breadcrumbs represent a file system hierarchy, `location`.
- The icon-only dropdown menu button for nested breadcrumb links implements the [Menu Button design pattern, per WAI-ARIA 1.1](https://www.w3.org/TR/wai-aria-practices/#menubutton).

### Drag-and-Drop in file management context.

Keyboard accessibility for drag-and-drop of files onto Breadcrumb items requires more discussion, but there are a few ways to provide equivalent support using the keyboard alone.

1. Items could be selected to be moved from a TableView or GridView.
  - The user could then press `Ctrl + C` to Copy or `Ctrl + X` to Cut the items to prepare to move them.
  - The user could then tab to the Breadcrumb item drop target and press `Ctrl + V` to paste the selected items.
2. Items could be selected to be moved from a TableView or GridView.
  - The user could then tab to the Breadcrumb item drop target, at which point the question is whether items are to be copied or moved.
  - User could then press `Shift + F10`, or `MenuKey` on Windows, or `Enter` to bring up a context menu with options to either Copy or Move selected items to the Breadcrumb item location.

When dragging, the icon-only dropdown menu button for nested breadcrumb links should expand on hover.

## v2 Implementation details

The v2 [`Breadcrumbs`](https://react-spectrum.corp.adobe.com/components/Breadcrumbs) implementation does not currently support the icon-only dropdown menu button for nested breadcrumb links or drag-and-drop.

`Breadcrumbs` consists of a `<nav>` element surrounding a list of links.

With the `title` variant, the last breadcrumb item link is contained within an `<h1>` element.
The `ariaLevel` prop can be used to ensure the appropriate heading level within the page for accessibility.
